<template>
	<view class="">
		<!-- 顶部自定义导航栏 -->
		<view class="scroll_header"></view>
		<view class="top_bg ">
			<view class="nav-top flex">
				<view class="left_width flex">
					<image class="left_img" @click="go_back" src="../static/left.png" mode="widthFix"></image>
					<view class="title-top">{{title_name}}</view>
				</view>
				<image class="jia" @click="go_add" src="../static/jiahao.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="top-width flex">
			<view class="center-width flex">
				<view class="choose_moth flex">
					<uni-data-select v-model="value" :localdata="range" :clear="false"
						@change="change"></uni-data-select>
					<image class="rili" src="../../static/images/promotion/underneath.png.png" mode="widthFix"></image>
				</view>
				<view class="jine-txt">金额</view>
			</view>
		</view>
		<scroll-view scroll-y="true" :style="{height: scrollHeight}" :scroll-top="scrollTop" @scroll="scroll"
			@scrolltolower="scrolltolower" refresher-enabled="true" :refresher-triggered="triggered"
			:refresher-threshold="100" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
			@refresherrestore="onRestore">
			<view class="mt-5" v-if="u_loadmore">
				<u-loadmore status="loading" icon-type="circle" />
			</view>
			<view class="content-width" v-else v-for="(people_info,index) in people_lists" :key="index">
				<view class="time">{{people_info.add_time_value}}</view>
				<view class="flex myinfo">
					<view class="name-txt">{{people_info.user_name}}</view>
					<view class="name-txt">￥{{ (people_info.money).toFixed(2) }}</view>
				</view>
				<view class="danhao">{{people_info.content}}</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	const SIZE = 10
	export default {
		data() {
			return {
				title_name: '',
				value: '',
				range: [{
					value: 1,
					text: "1月"
				}, {
					value: 2,
					text: "2月"
				}, {
					value: 3,
					text: "3月"
				}, {
					value: 4,
					text: "4月"
				}, {
					value: 5,
					text: "5月"
				}, {
					value: 6,
					text: "6月"
				}, {
					value: 7,
					text: "7月"
				}, {
					value: 8,
					text: "8月"
				}, {
					value: 9,
					text: "9月"
				}, {
					value: 10,
					text: "10月"
				}, {
					value: 11,
					text: "11月"
				}, {
					value: 12,
					text: "12月"
				}],
				people_lists: [],
				id: '',
				more: 1, // 第几页
				count: 10, // 条数
				scrollHeight: 0, // 自适应高度
				u_loadmore: true, // 加载中
				triggered: false, // 下拉刷新
				total: 0, // 总条数
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
			}
		},
		onLoad(option) {
			console.log("chuanzhi", option);
			this.title_name = option.name
			this.id = option.id
			this.getData()
		},
		mounted() {
			this.value = this.getCurrentDate();
		},
		onReady() {
			// 获取屏幕尺寸的方法 start
			let _this = this
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.scroll_header').boundingClientRect()
					query.exec(function(res) {
						_this.scrollHeight = resu.windowHeight - res[0].bottom + 'px';
					})
				}
			})
			// 获取屏幕尺寸的方法 end
		},

		methods: {
			change(e) {
				console.log("e:", e);
				this.getData()
			},
			getCurrentDate() {
				let now = new Date();
				let month = now.getMonth() + 1;
				return month;
			},
			go_add() {
				uni.navigateTo({
					url: '/pagesC/fuzhaibiao/add_leixing'
				})
			},

			go_back() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 下拉刷新 自定义下拉刷新控件被下拉
			onPulling(e) {
				this.triggered = true;
			},
			// 滚动时触发
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			// 自定义下拉刷新被触发
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				setTimeout(() => {
					this.getData()
					this.triggered = false;
					this._freshing = false;
				}, 1000)
			},
			// 上拉加载函数
			scrolltolower(e) {
				console.log("eeeeeeeeeee", e);
				let that = this
				// 每次上拉加载的数据比上一次多十个
				that.count += SIZE
				if (that.people_lists.length == that.total) {
					return
				} else {
					setTimeout(() => {
						that.getData()
					}, 1000)
				}
			},
			// 自定义下拉刷新被复位
			onRestore() {
				this.triggered = 'restore'; // 需要重置
			},
			// 上拉加载函数
			scrolltolower(e) {
				let that = this
				// 每次上拉加载的数据比上一次多十个
				that.count += SIZE
				setTimeout(() => {
					that.getData()
				}, 1000)
			},
			getData() {
				this.$H.post('/v2/store/user/inouttypeshop', {
					month: this.value,
					inouttype_id: this.id,
					pagination: {
						count: this.count,
						page: this.more,
					},
				}).then(res => {
					if (res.status.succeed == 1) {
						this.u_loadmore = false
						this.people_lists = res.data
					}
					console.log("获取账户明细列表", res);
				})
			},
		}
	}
</script>

<style>
	.danhao {
		width: 500rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 28rpx;
		color: #666;
	}

	.myinfo {
		justify-content: space-between;
		margin: 10rpx 0 10rpx 0;
	}

	.name-txt {
		font-size: 30rpx;
		color: #000;
		font-weight: 600;
	}

	.time {
		font-size: 28rpx;
		color: #666;
	}

	.content-width:last-of-type {
		border: none;
	}

	.content-width {
		width: 690rpx;
		margin: auto;
		padding: 25rpx 0 30rpx 0;
		border-bottom: 1px solid #eee;
	}

	.nav-top {
		width: 690rpx;
		padding-bottom: 20rpx;
		margin: 140rpx auto auto;
		justify-content: space-between;
	}

	.title-top {
		font-size: 40rpx;
		color: #fff;
		font-weight: 600;
	}

	.jine-txt {
		font-size: 30rpx;
		color: #a9a9a9;
	}

	/deep/.uni-select__input-text {
		font-size: 30rpx !important;
	}

	/deep/.uni-select {
		border: none !important;
	}

	/deep/.uni-select__selector-empty,
	.uni-select__selector-item {
		line-height: 60rpx !important;
		padding: 0rpx 7rpx !important;
	}

	.rili {
		width: 40rpx;
		display: block;
	}

	.xia {
		width: 50rpx;
		display: block;
	}

	.left_img {
		width: 35rpx;
		margin-right: 20rpx;
		display: block;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.top-width {
		width: 750rpx;
		height: 80rpx;
		background-color: #f6f6f6;
	}

	page {
		background-color: #fff !important;
	}

	.center-width {
		width: 690rpx;
		margin: auto;
		justify-content: space-between;
	}

	.jia {
		width: 60rpx;
		display: block;
	}

	.top_bg {
		width: 750rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #ff5500;
	}
</style>